<template>
	<view :style="$theme.pageStyle">
		<view class="bg-white radius-lg" style="min-height: 90vh;margin: 10px;border-radius: 5px;">
			<view class="flex margin-lr-sm padding-tb justify-start">
				<view class="bg-img radius margin-lr-xs imagestyle"
					:style="{ backgroundImage: 'url(' + contractData.goods_image + ')' }">
				</view>
				<view class="text-black margin-left-sm" style="width: 480rpx;">
					<view class="text-left margin-top-sm">
						<text class="text-xl text-black text-bold">{{contractData.name}}</text>
					</view>
					<view class="text-left margin-top-xs">
						<text class="text-black">{{contractData.remarks}}</text>
					</view>
				</view>
			</view>
			
			<view class="priceandtype padding-tb solid-bottom">
				<view class="itemtype">
					<u-tag text="会员免费" size="mini" type="error" plain plainFill v-if="contractData.vip_free === 1"></u-tag>
					<view style="margin-right: 5px;width: 10px;"></view>
					<u-tag :text="contractData.category_desc" size="mini" type="warning" plain plainFill></u-tag>
				</view>
				<view class="itemprice">
					<span class="span">¥</span><span class="price">{{contractData.price}}</span>
				</view>
			</view>

			<view class="padding-tb solid-bottom">
				<view class="flex text-center bg-white">
					<view class="flex flex-sub flex-column">
						<view class="text-xl text-black text-bold">{{contractData.words}}字</view>
						<view class="margin-top-xs text-sm text-gray">
							字数
						</view>
					</view>
					<view class="flex flex-sub flex-column">
						<view class="text-xl text-black text-bold">{{contractData.size}}MB</view>
						<view class="margin-top-xs text-sm text-gray">
							文件大小
						</view>
					</view>
					<view class="flex flex-sub flex-column">
						<view class="text-xl text-black text-bold">{{contractData.download}}次</view>
						<view class="margin-top-xs text-sm text-gray">
							下载次数
						</view>
					</view>
				</view>
			</view>
			<view class="margin-tb-xs margin-left text-black text-bold text-lg" style="margin-top: 10px;">
				简介
			</view>
			<view class="margin padding-bottom" style="line-height: 48rpx;">
				<u-parse :content="contractData.content"></u-parse>
			</view>
		</view>
		<view class="buy">
			<view class="buy-left">
				<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/101710856750PypyRb.png" mode="">
				</image>
				<text>收藏</text>
			</view>
			<button class="buy-left sharebtn" open-type="share">
				<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/171710856757wuuJE4.png" mode="">
				</image>
				<text style="color: #848484;">分享</text>
			</button>
			<view class="buy-right" @click="ShowPay()">立即购买</view>
		</view>
		
		<!-- 支付pop -->
		<u-popup :show="paypop" mode="bottom" :round="15" @close="closespaypop" @open="openpaypop">
			<view style="padding-bottom: 30rpx;height: 350px;" class="showbottom">
				<view class="pay-type-list">
					<view class="pay-title">请选择支付方式：</view>
					<radio-group class="uni-flex" name="gender">
						<block v-for="(item, index) in payList" :key="index">
							<view class="type-item" :class="{ 'act': index === selectedIndex }" @click="selectNav(item,index)">
								<image :src="item.icon" mode="" class="a-img"></image>
								<view class="con">
									<text class="tit">{{item.pay_way_name}}</text>
								</view>
							</view>
						</block>
					</radio-group>
				</view>
				<view class="botton" @click="topay()">
					<text class="text110">确认支付</text>
				</view>
			</view>
		</u-popup>
		
		
	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	export default {
		data() {
			return {
				id: '',
				contractData: [],
				paypop: false,
				payList: uni.getStorageSync('pay'),
				Payinfo: {},
				pay_way: 1,
				selectedIndex: 10,
			}
		},
		onLoad(opt) {
			this.id = opt.id
		},
		onShow() {
			this.IndexData()
		},
		methods: {
			closespaypop(){
				this.paypop = false
			},
			openpaypop(){},
			selectNav(item, index) {
				this.selectedIndex = index;
				this.pay_way = item.pay_config_id
			},
			ShowPay(){
				this.paypop = true
			},
			async IndexData() {
				try {
					const res = await $H.post('contract/detail', {
						id: this.id
					}, {
						token: true
					});

					this.contractData = res.data

				} catch (error) {
					console.error('Error fetching IndexData:', error);
				} finally {
					uni.hideLoading();
				}
			},
			async topay() {
				try {
					const res = await $H.post('order/CreateContractOrder', {
						id: this.id,
						pay_way: this.pay_way,
					}, {
						token: true
					});
					
					this.paypop = false
					if (res.code == 1) {
						if (res.data.code == 1) {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/order/contract/index'
								})
							}, 400)
						} else if(res.data.code == 2){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
							// this.paypop = false
						} else {
							uni.requestPayment({
								provider: 'wxpay',
								appId: res.data.config.appId,
								timeStamp: res.data.config.timeStamp,
								nonceStr: res.data.config.nonceStr,
								package: res.data.config.package,
								signType: res.data.config.signType,
								paySign: res.data.config.paySign,
								success: function(res) {
									//跳转到会话页面
									setTimeout(() => {
										uni.navigateTo({
											url: '/order/contract/index'
										})
									}, 400)
								},
								fail: function(err) {
									uni.showToast({
										title: '支付失败',
										duration: 2000
									});
								}
							})
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
					
					
				} catch (error) {
					console.error('Error fetching IndexData:', error);
				} finally {
					uni.hideLoading();
				}
			},
			Tourl(url) {
				uni.navigateTo({
					url: url
				})
			},
			muluchange(e) {
				this.btnnum = e
			},
		},
	}
</script>

<style>
	page {
		background-color: #f1f1f1;
	}
</style>
<style lang="less" scoped>
	.imagestyle {
		height: 230rpx;
		width: 160rpx;
		border-radius: 8px;
	}

	.priceandtype{
		display: flex;
		justify-content: space-between;
		margin: 0px 15px 0px 15px;
		.itemtype{
			display: flex;
			
		}
		.itemprice{
			display: flex;
			height: 25px;
			line-height: 25px;
				
			.price {
				color: #fa3534;
				font-size: 24px;
				font-weight: 600;
			}
				
			.span {
				color: #fa3534;
				font-size: 10px;
				margin-right: 5px;
				line-height: 30px;
			}
				
			.huaxian {
				color: #C4C4C4;
				font-size: 14px;
				margin-left: 5px;
				margin-top: 1.5px;
				text-decoration: line-through;
			}
		}
	}




	.buy {
		width: 100%;
		height: 122upx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		border-radius: 40upx 40upx 0 0;
		border-top: 1rpx solid #eee;

		&-left {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: center;

			image {
				width: 37upx;
				height: 37upx;
			}

			text {
				margin-top: 15upx;
				font-size: 24upx;
				color: #ff6229;
			}
		}

		.sharebtn {
			margin: 0;
			padding: 0;
			outline: none;
			border-radius: 0;
			background-color: transparent;
			line-height: inherit;
			width: max-content;
		}

		.sharebtn:after {
			border: none;
		}

		&-right {
			width: 450upx;
			height: 80upx;
			background-image: linear-gradient(to right, var(--color-primary), var(--color-minor));
			border-radius: 80upx;
			font-size: 34upx;
			font-weight: 700;
			color: #fff;
			// border: 3upx solid #fff;
			text-align: center;
			line-height: 80upx;
			letter-spacing: 7rpx;
		}
	}
	.showbottom {
		padding: 20px;
	}
	
	.pay-type-list {
		// margin: 15px;
		margin-bottom: 10px;
		.pay-title {
			height: 70upx;
			font-size: 14px;
			line-height: 70upx;
			font-weight: bold;
			// border-bottom: 2upx solid #DDDAD4;
		}
	
		.type-item {
			height: 110upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30upx;
			position: relative;
			padding: 10px;
			margin-bottom: 15px;
			// border-bottom: 2upx solid #DDDAD4;
			.a-img {
				width: 70upx;
				height: 70upx;
				margin-right: 20upx;
			}
		}
	
		.b-b {
			border-bottom: 2upx solid #DDDAD4;
		}
	
		.icon {
			width: 100upx;
			font-size: 52upx;
		}
	
		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}
	
		.icon-weixinzhifu {
			color: #36cb59;
		}
	
		.icon-alipay {
			color: #01aaef;
		}
	
		.tit {
			font-size: 28upx;
			color: #f97020;
			margin-bottom: 4upx;
		}
	
		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 28upx;
			color: #f97020;
		}
	}
	
	.act{
		background: rgba(0, 122, 255, 0.1);
		border-radius: 15px;
	}
	
	.text110 {
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Regular;
	}
	
	
	.botton {
		bottom: 20px;
		position: fixed;
		width: 90%;
		border-radius: 44rpx;
		background-color: var(--color-primary);
		height: 50px;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: column;
	}
</style>